<template>
	<view class="col">
		<view class="box" v-for="(item, index) in arr" :key="index">
			<image class="img" :src="item.scene_pic_url"></image>
			<view class="txt">
				<view class="t1">{{ item.title }}</view>
				<view class="t2">{{ item.subtitle }}</view>
				<view class="t3">{{ item.price_info | priceFormat }}起</view>
			</view>
		</view>
		<view class="page">
			<view class="page1" @tap="yiye">上一页</view>
			<view class="page2" @tap="erye">下一页</view>
		</view>

		<customTabbar></customTabbar>
	</view>
</template>

<script>
import { ApiZhuanTi } from '@/utils/api.js';
import customTabbar from '@/custom-tab-bar/index.vue';
export default {
	components: {
		customTabbar
	},
	data() {
		return {
			arr: []
		};
	},
	methods: {
		async shuju(page, size) {
			let res = await ApiZhuanTi({
				page: page,
				size: size
			});
			
			this.arr = res.data.data;
		},
		yiye() {
			this.shuju(1, 10);
		},
		erye() {
			this.shuju(2, 10);
		}
	},
	onShow() {
		this.$store.commit('tabbarIndex', 1);
		this.shuju(1, 10);
	},
	onLoad() {}
};
</script>

<style lang="scss">
.col {
	background-color: #eee;
	width: 750rpx;
	height: 8250rpx;
}
.box {
	width: 750rpx;
	background-color: #fff;
	height: 750rpx;
	margin-bottom: 50rpx;
	text-align: center;
	line-height: 60rpx;
	.img {
		width: 750rpx;
	}
	.t3 {
		color: red;
	}
	.txt {
		margin: auto;
		width: 750rpx;
		.t1 .t2 .t3 {
			width: 90%;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}
}
.page {
	width: 750rpx;
	height: 100rpx;
	display: flex;
	text-align: center;
	.page1 {
		width: 50%;
		background-color: gray;
		line-height: 100rpx;
	}
	.page2 {
		width: 50%;
		line-height: 100rpx;
		background-color: #fff;
	}
}
</style>
